<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>BI Apps Viewer</title>
    <!--meta http-equiv="X-UA-Compatible" content="IE=edge"-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="css/common/bi_app_style.css"/>
    <link rel="Stylesheet" type="text/css" href="<%=theme%>/css/ui-layout.css"/>
    <link rel="Stylesheet" type="text/css" href="<%=theme%>/css/jquery-ui.css">
    <link rel="Stylesheet" type="text/css" href="<%=theme%>/css/theme_style.css"/>
    <link rel="Stylesheet" type="text/css" href="css/common/style_ie7.css" />

    <script type="text/javascript" src="dlg/dragiframe.js"></script>
    <script type="text/JavaScript" src="api/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="api/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/JavaScript" src="<%=theme%>/script/jquery.layout.min.js"></script>
    <script type="text/JavaScript" src="<%=theme%>/script/jquery.easing.1.3.js"></script>
    <script type="text/JavaScript" src="api/js/jquery.layout.pseudoClose.js"></script>
    <script type="text/javascript" src="api/boi.js"></script>
    <script type='text/JavaScript' src='../zbw_reporting/scripts/framework_include.js'></script>
    <%
    Data: custom_script type string.
    select single custom_script from ZMYBW_APP_DEF into custom_script where app_id = app_id.

    if custom_script is not initial.
    %>
    <script type='text/JavaScript' src='<%=custom_script%>'></script>
    <%
    endif.
    %>

    <script type="text/javascript">

        $(function () {

            BOI.theme = "<%=theme%>";

            //This code included into boi.js by Faisal
           /* BOI.Events.addListener(BOI.Events.repopen, function (args) {
                showHideComponents(args[0]);
            });
            BOI.Events.addListener(BOI.Events.repchange, function (args) {
                showHideComponents(args[0]);
            });*/

            //render the layout
            BOI.app_id = BOILib.Util.getUrlParam("app_id");
            BOI.Designer.initialize('bi_layout', BOI.app_id, function () {

                drawLayout();
                resize();
            });

            //TODO: THis is a custom script to be included in the js file specified in app admin
            /*BOI.Events.addListener(BOI.Events.contextchange, function(args){

             var mis_report1 = BOI.getContextReportByTechname("MIS_SWF_1");
             var mis_report2 = BOI.getContextReportByTechname("MIS_SWF_2");

             BOI.createContextVariable("BL", "",  "string", "P", mis_report1);
             BOI.createContextVariable("Total", "",  "string", "P", mis_report1);

             //BOI.createContextVariable("BL", "",  "string", "P", mis_report2);
             //BOI.createContextVariable("Total", "",  "string", "P", mis_report2);

             BOI.Events.addListener(BOI.Events.rangechange, function(args){
             //args[0] is EIC name
             //args[1] is value
             var newValue = args[1];
             switch (args[0]) {
             case "BL":
             //alert("sending " + args[0] + ":" + args[1]);
             BOI.Flash.sendEIC(mis_report2, args[0], args[1], frames['COMP_CENTER_bi_apps_comp_report_view'].document);
             break;
             case "Total":
             //alert("sending " + args[0] + ":" + args[1]);
             BOI.Flash.sendEIC(mis_report2, args[0], args[1], frames['COMP_CENTER_bi_apps_comp_report_view'].document);
             break;
             }
             });

             });*/
            /***************************************************************************************/

        });


        function showHideComponents(rep_id) {
            var report = BOI.context.reports[rep_id];

            if (report) {
                for (var p in BOI.Designer.Layout.panels) {
                    var panel = BOI.Designer.Layout.panels[p];
                    for (var c in panel.components) {
                        var comp = panel.components[c];
                        if (comp.iframe) {
                            if (comp.iframe.properties.varname) {
                                var vname = comp.iframe.properties.varname;
                                if (report.variables[vname]) {
                                    $(comp.element).show();
                                }
                                else {
                                    $(comp.element).hide();
                                }
                            }

                        }
                    }
                }
            }
        }

        var resize = function () {
            $('html,body').height('100%');

            $('#bi_layout iframe').each(function () {
                $(this).load(function () {
                    var name = $(this).attr('name');
                    var h = window.frames[name].properties.height;
                    $(this).height(h);
                });
            });
        }

        function drawLayout() {
            var sizes = {
                top: parseInt(BOI.Designer.Layout.panels['TOP'].properties.height.value),
                left: parseInt(BOI.Designer.Layout.panels['LEFT'].properties.width.value),
                right: parseInt(BOI.Designer.Layout.panels['RIGHT'].properties.width.value),
                bottom: parseInt(BOI.Designer.Layout.panels['BOTTOM'].properties.height.value)
            }

            $('.wrapper').layout({
                applyDefaultStyles:true,
                resizable:true,
                closable:         true,
                south__closable: false,
                east__closable: false,
                south__resizable: false,
                east__resizable: false,
                north__resizable: false,

                north__size:sizes.top,
                west__size:sizes.left,
                east__size:sizes.right,
                south__size:sizes.bottom,
                north__maskContents:true,
                west__maskContents:true,
                east__maskContents:true,
                south__maskContents:true,
                center__maskContents:true,
                stateManagement__enabled:  false,

                minSize:        1

                //  set callback on any pane(s) where you want to prevent the pane 'closing'
                , west__onclose_start:  $.layout.callbacks.pseudoClose
                ,	north__onclose_start:	$.layout.callbacks.pseudoClose
                ,	south__onclose_start:	$.layout.callbacks.pseudoClose
                , east__onclose_start:  $.layout.callbacks.pseudoClose


            });
            $('.wrapper').animate({ 'opacity': '1' }, 1000, function () {
            });
        }

        /**
         These methods are used for dialogs.
         **/
        function closeDialog(dlgName){
            var dlg = $("#"+dlgName);
            closeDialogInternal(dlg);

        }
        function  onDialogLoadEvent(){
            frames["dlg_iframe"].onLoadEvent();
        }
        function closeDialogInternal(dlg){
            if(dlg[0]){
                dlg.css("display", "none");
                dlg.attr("src", "");
                dlg.remove();
            }
        }

    </script>
</head>
<body>
<div id="bi_layout" class="apps_viewer">
    <div class="wrapper">
        <div class="ui-layout-center">
            <div id="CENTER">
                <!-- <iframe  src="bi_apps_comp_report_view.htm"></iframe>-->
            </div>
        </div>
        <div class="ui-layout-north">
            <div id="TOP">
                <!-- <iframe height="80" src="bi_comp-banner.htm"></iframe>-->
            </div>
        </div>
        <div class="ui-layout-south">
            <div id="BOTTOM"></div>
        </div>
        <div class="ui-layout-east">
            <div id="RIGHT"></div>
        </div>
        <div class="ui-layout-west">
            <div id="LEFT">
                <!--<iframe height="100%" src="test-comp-organization.htm"></iframe>-->
            </div>
        </div>
    </div>
</div>
<div id="dlg_container">
</div>
</body>
</html>
<%
theme = ''.
%>
